#@layout()
#define script()
<script src="#(CPATH)/static/components/vditor/index.min.js"></script>
<script src="#(CPATH)/static/components/ckeditor5/ckeditor.js"></script>
<script src="#(CPATH)/static/components/editable/js/bootstrap-editable.min.js"></script>
<script src="#(CPATH)/static/components/selectize/selectize.min.js"></script>
<script src="#(CPATH)/static/components/highlight/highlight.pack.js"></script>


<script>

    var $select = $('.article-tags').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        persist: false,
        addPrecedence: true,
        create: true,
        render: {
            option_create: function (data, escape) {
                return '<div class="create" style="padding-left: 5px"> 添加标签：<strong style="color: #DD1144">' + escape(data.input) + '</strong></div>';
            }
        }
    });

    $(".newTag").each(function () {
        $(this).on('click', function () {
            $select[0].selectize.createItem($(this).text());
        })
    });

    $(".tflag").each(function () {
        $(this).on('click', function () {
            $("#flag").val($(this).text());
        })
    });

    $(".submitBtn").on("click", function () {
        $("#articleStatus").val($(this).attr("data-status"));
        doSubmit();
    });

    // 全局函数,在CKEditor ctrl + s 快捷键处用到,保留article的status
    window.doSubmit = function () {
        if (window.currentCKEditor) {
            $("#content").val(window.currentCKEditor.getData());
        } else if (window.currentVditor) {
            $("#content").val(window.currentVditor.getHTML());
        }
        ajaxSubmit("#form", function (data) {
            $("#articleId").attr("value", data.id);
            window.history.replaceState({}, '', `#(CPATH)/admin/article/write/`+data.id)
            toastr.success('文章保存成功。');
        });
    };

    setSaveHotKeyFunction(doSubmit);

    /**
     * 缩略图，移除图片的按钮功能
     */
    $("#removeThumbnail").on("click", function () {
        $("#thumbnail").attr("src", "#(CPATH)/static/commons/img/nothumbnail.jpg");
        $("#articleThumbnail").val("");
    })


    /**
     * 切换编辑器的按钮功能
     * @param id
     */
    function doChangeEditor(id) {
        if (confirm('确定要切换编辑器吗？切换可能出现前台渲染内容缺失的问题。')) {
            var changeMode = editMode == "html" ? "markdown" : "html";
            if (id != '0') {
                ajaxGet('#(CPATH)/admin/article/doChangeEditMode?id=' + id + "&mode=" + changeMode);
            } else {
                ajaxGet('#(CPATH)/commons/changeEditor/' + changeMode);
            }
        }
    }

    //通过编辑模式来决定初始化不同的编辑器
    var editMode = "#(editMode ?? 'html')";
    if (editMode === 'html') {
        initCkEdtior('#editor');
    } else {
        initVdtior('editor');
    }



    $(".chooseAttachment").on("click", function () {
        var $this = $(this);
        layer.open({
            type: 2,
            title: '选择附件',
            anim: 2,
            shadeClose: true,
            shade: 0.3,
            area: ['90%', '90%'],
            content: jpress.cpath + '/admin/attachment/browse?uititle=附件',
            end: function () {
                if (layer.data.src != null) {

                    var src = layer.data.src;
                    //video ".mp4", ".avi", ".wmv", ".mpeg", ".mov", ".mkv", ".flv", ".rmvb", ".rm", ".3gp", ".ts", ".vob", ".m3u8"
                    if (src.endsWith(".mp4") || src.endsWith(".avi") || src.endsWith(".wmv") || src.endsWith(".mpeg") || src.endsWith(".mov")
                        || src.endsWith(".mkv") || src.endsWith(".flv") || src.endsWith(".rmvb") || src.endsWith(".rm") || src.endsWith(".3gp") ||
                        src.endsWith(".ts") || src.endsWith(".vob") || src.endsWith(".m3u8")) {

                        if (typeof currentCKEditor != 'undefined' && currentCKEditor) {
                            var video = document.createElement('video') // 添加的内容可以自定义， 这里以添加图片为例
                            video.setAttribute('src', src)
                            video.setAttribute('style', 'max-width:100%;')
                            video.setAttribute('controls', 'controls')

                            insertHtmlToEditor(video.outerHTML);
                        } else if (currentVditor) {
                            currentVditor.insertValue('附件：[' + layer.data.title + '](' + src + ')')
                        }


                    }

                    //image ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".webp"
                    else if (src.endsWith(".jpg") || src.endsWith(".jpeg") || src.endsWith(".png")
                        || src.endsWith(".bmp") || src.endsWith(".gif") || src.endsWith(".webp")) {

                        if (typeof currentCKEditor != 'undefined' && currentCKEditor) {
                            var img = document.createElement('img') // 添加的内容可以自定义， 这里以添加图片为例
                            img.setAttribute('src', src)
                            insertHtmlToEditor(img.outerHTML);
                        } else if (currentVditor) {
                            //![图片alt](图片地址 ''图片title'')
                            currentVditor.insertValue('![' + layer.data.title + '](' + src + ')')
                        }
                    }
                    // other file
                    else {
                        if (typeof currentCKEditor != 'undefined' && currentCKEditor) {
                            var a = document.createElement('a') // 添加的内容可以自定义， 这里以添加图片为例
                            a.setAttribute('href', src)
                            a.setAttribute("target", "_blank")
                            a.innerHTML = layer.data.title;
                            insertHtmlToEditor('附件：' + a.outerHTML);
                        } else if (currentVditor) {
                            currentVditor.insertValue('附件：[' + layer.data.title + '](' + src + ')')
                        }
                    }
                }
            }
        });
    })

    function insertHtmlToEditor(html) {
        const viewFragment = currentCKEditor.data.processor.toView(html);
        const modelFragment = currentCKEditor.data.toModel(viewFragment);
        currentCKEditor.model.insertContent(modelFragment, currentCKEditor.model.document.selection);
    }


</script>
#end
#define css()
<link href="#(CPATH)/static/components/editable/css/bootstrap-editable.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.css" rel="stylesheet">
<link href="#(CPATH)/static/components/selectize/css/selectize.bootstrap4.css" rel="stylesheet">
<link href="#(CPATH)/static/components/highlight/styles/github.css" rel="stylesheet">
<link href="#(CPATH)/static/components/vditor/index.css" rel="stylesheet">
<style>
    .popover-content {
        padding: 9px 14px;
        margin: 0 10px;
    }

    #slug {
        cursor: pointer;
    }

    .vditor-wysiwyg pre.vditor-reset:focus {
        outline: none;
        background-color: #fff;
    }

    .ck-editor__editable_inline {
        min-height: 500px;
    }

</style>
#end

#define content()
<section class="content-header">

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">

                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1>
                            写文章
                            <small data-toggle="tooltip" title="" data-placement="right"
                                   data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                            <small> 首页 / 文章 / 写文章</small>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->

</section>


<section class="content">
    <form action="#(CPATH)/admin/article/doWriteSave" method="post" id="form">
        <input type="hidden" id="articleStatus" name="article.status" value='#(article.status ?? "normal")'>
        <input type="hidden" id="articleId" name="article.id" value="#(article.id ??)">
        <input type="hidden" name="article.user_id" value="#(article.user_id ?? USER.id)">
        <input type="hidden" id="editModeId" name="article.edit_mode" value="#(editMode ??)">
        <div class="row">
            <div class="col-lg-9">

                <!-- /.card-header -->
                <!-- form start -->
                <div class="">
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <input type="input" class="form-control form-control-lg" name="article.title" autocomplete="off"
                                   placeholder="请输入标题"
                                   id="article-title"
                                   value="#(article.title ??)">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12"style="padding-bottom: 5px;display: flex;align-items: center;justify-content: space-between;">
                            <div>
                                网址：<span class="domainSpan">#option('web_domain')</span>#(CPATH)/article/<span id="slug"
                                                                                                               class="slugSpan"
                                                                                                               for-input="article-slug">#(article.slug ??)</span>#if(option("web_fake_static_enable"))#option('web_fake_static_suffix')#end
                                #if(article && article.isNormal())
                                （<a href="#(article.url)" target="_blank">访问</a>）
                                #end
                                <input type="hidden" id="article-slug" name="article.slug" value="#(article.slug ??)">
                            </div>


                            <div>
                                <button type="button" class="btn btn-default btn-sm "
                                        onclick="doChangeEditor('#(article.id ?? 0)')">
                                    <i class="fas fa-exchange-alt"></i>
                                </button>

                                <button type="button" class="chooseAttachment btn btn-default btn-sm ">
                                    <i class="fas fa-paperclip"></i> 选择附件
                                </button>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div id="editor">#(article.orignalContent ??)</div>
                            <input type="hidden" name="article.content" id="content"/>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <div class="card card-outlinecard-solid">
                                <div class="card-header with-border">
                                    <h3 class="card-title">文章属性</h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <div class="card-body">
                                        #(fields.render())
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-lg-3">
                <div class="card card-outlinecard-solid">
                    <div class="card-body">

                        <button type="button" data-status="normal" class="btn btn-primary btn-sm submitBtn">发布
                        </button>
                        <button type="button" data-status="draft" class="btn btn-default btn-sm submitBtn">草稿
                        </button>
                        <a href="#" data-status="trash" class="float-right submitBtn"
                           style="padding-top: 5px;">移至垃圾箱</a>
                    </div>
                </div>


                <div class="card card-outlinecard-solid">
                    <div class="card-header with-border ">
                        <h3 class="card-title">分类</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            #for(category : categories)
                            <div>
                                <label>
                                    #for(i = 0; i < category.layerNumber; i++)
                                    &nbsp;&nbsp;
                                    #end

                                    #if(category.isCheck)
                                    <input type="checkbox" name="category" value="#(category.id)" checked/>
                                    #else
                                    <input type="checkbox" name="category" value="#(category.id)"/>
                                    #end

                                    #(category.title ??)
                                </label>
                            </div>
                            #else
                            暂无分类
                            #end
                        </div>
                    </div>
                </div>

                <div class="card card-outlinecard-solid">
                    <div class="card-header with-border ">
                        <h3 class="card-title">标签</h3>
                    </div>
                    <div class="card-body">
                        <select class="form-control article-tags" multiple="multiple" name="tag">
                        #for(tag : tags)
                        <option value="#(tag.title ??)" selected>#(tag.title ??)</option>
                        #end
                        </select>
                        <p class="text-muted">多个标签请用 “回车键” 或英文逗号（,）隔开。</p>

                        <div class="tags">
                            #tags(count = 20)
                            #for(tag : tags)
                            <a href="javascript:;" class="newTag">#(tag.title)</a>
                            #end
                            #end
                        </div>
                    </div>
                </div>


                <div class="card card-outlinecard-solid">
                    <div class="card-header with-border ">
                        <h3 class="card-title">缩略图</h3>
                    </div>
                    <div class="card-body p-0">
                        <img src="#(CPATH)#(article.thumbnail ?? '/static/commons/img/nothumbnail.jpg')"
                             style="width: 100%;max-height: 500px"
                             id="thumbnail">
                        <input type="hidden" value="#(article.thumbnail ??)" name="article.thumbnail"
                               id="articleThumbnail">
                    </div>
                    <div class="card-footer">
                        <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                for-src="thumbnail"
                                for-input="articleThumbnail">选择图片
                        </button>
                        <a href="javascript:;" style="padding-left: 15px" id="removeThumbnail">移除</a>
                    </div>
                </div>


                <div class="card card-outlinecard-solid">
                    <div class="card-header with-border ">
                        <h3 class="card-title">模板</h3>
                    </div>
                    <div class="card-body">

                        <div class="form-group row">
                            <select class="form-control" name="article.style">
                                <option value="">默认（article.html）</option>
                                #for(style : styles)
                                <option value="#(style)" #selectedIf(article && article.style==style)>
                                    article_#(style).html
                                </option>
                                #end
                            </select>
                        </div>

                        <div class="form-group row">
                            <input type="text" class="form-control" name="article.flag"
                                   placeholder="文章标识" value="#(article.flag ??)" id="flag"/>
                            #if(flags && flags.size() > 0)
                            <p class="text-muted">当前模板支持的展示标识有：</p>
                            <div class="tags">
                                #for(flag : flags ??)
                                <a href="javascript:;" class="tflag">#(flag)</a>
                                #end
                            </div>
                            #end
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </form>
</section>
#end
